<!-- Footer -->
<footer>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <div class="footer-re">
        <div class="row">
            <div>
                <!-- SNS Link -->
                    
                {% include sns-links.html center=true %}
<style type="text/css">
/*后一篇*/
    a.next {
        background-image: url('{% if page.next.header-img %}{{page.next.header-img}}{% else %}http://blog.img.hackerjerry.top/Fr3H5T0djIS8W5oODkX27bNvC35U{% endif %}');
        display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-decoration: none;
    position: relative;
    text-align: center;
    color: #fff;
    background: #6795c6 no-repeat center center;
    background-size: cover;
    overflow: hidden;
    }

/*前一篇*/
    a.previous {
        background-image: url('{% if page.previous.header-img %}{{page.previous.header-img}}{% else %}http://blog.img.hackerjerry.top/Fr3H5T0djIS8W5oODkX27bNvC35U{% endif %}');
        display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-decoration: none;
    position: relative;
    text-align: center;
    color: #fff;
    background: #88bf61d9 no-repeat center center;
    background-size: cover;
    overflow: hidden;
    }
/* 两个元素父类 */
    .read-next {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-top: 1rem;
    height: 38rem;
    /* 不知道为什么添加了那个js动效之后，在默认背景以及国庆那张图存在的底栏又出现了疯狂跳动的bug，修改稿一些的height后就消除了 */
        }
    /* 对于手机的响应式布局*/
    @media only screen and (max-width: 2000px) {
           .post {
            margin-left: 16px;
             margin-right: 16px;
             width: 100%;
           }
            .post p{
            font-size: 2.2rem;
        }
            .read-next div {
                font-size: 5.1rem;
                text-align: center;
                margin-top: 3rem;
                font-weight: bold;
                line-height: 1.2;
            }
            a.next {
                max-width: 50%;
            }
            a.previous{
                max-width: 50%;
            }
        }
       @media only screen and (max-width: 1200px) {
           .post {
            margin-left: 16px;
             margin-right: 16px;
             width: 100%;
           }
            .post p{
            font-size: 2.0rem;
        }
            .read-next div {
                font-size: 4.9rem;
                text-align: center;
                margin-top: 2.8rem;
                font-weight: bold;
                line-height: 1.2;
            }
            a.next {
                max-width: 50%;
            }
            a.previous{
                max-width: 50%;
            }
        }
        @media only screen and (max-width: 800px) {
            .post{
                width: 100%;
            }
            .post p{
                font-size: 1.8rem;
        }
        .read-next div {
        font-size: 3.6rem;
        text-align: center;
        margin-top: 2rem;
        font-weight: bold;
    }
            a.next {
                max-width: 50%;
            }
            a.previous{
                max-width: 50%;
            }
    } 
        @media only screen and (max-width: 450px) {
            .read-next{
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                 flex-direction: column;
                 margin-top: 4rem;
            }
            .read-next .post {
                 width: 100%;
                 margin-top: 2rem;
                 margin-bottom: 2rem;
                 margin-left: 16px;
                 margin-right: 16px;
                 padding-bottom: 2rem;
                 line-height: 1.65em;
         }
            .next .post{
                padding-top: 0rem;
                padding-bottom: 6rem;
            }
            .previous .post {
                padding-top: 0rem;
                padding-bottom: 6rem;
            }
            .post p{
            /* display: none; */
            font-size: 1rem;
        }
            .read-next div {
        font-size: 2.5rem;
        text-align: center;
        margin-top: 1.8rem;
        font-weight: bold;
    }
            a.next {
                max-width: 100%;
            }
            a.previous{
                max-width: 100%;
            }
    }
     
        /* 对于平板横屏时的响应式布局 */
     
    /*遮罩层*/
    a.next:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    transition: all .5s ease;
}
    a.next:hover:before {
        background: rgba(0, 0, 0, 0.57);
    }
    a.previous:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    transition: all .5s ease;
}
    a.previous:hover:before{
        background: rgba(0, 0, 0, 0.57);
    }


    .next .post:before {
    content: "Read Next";
    padding: 4px 10px 5px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-family: "Open Sans",sans-serif;
    color: rgba(255,255,255,0.8);
    border: rgba(255,255,255,0.5) 1px solid;
    border-radius: 4px;
    transition: all .5s ease;
    }
    .next .post:hover:before{
        background-color: azure;
        color: dimgray;
    }
    .previous .post:hover:before{
        background-color: azure;
        color: dimgray;
    }
    .previous .post:before {
    content: "Read Previous";
    padding: 4px 10px 5px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-family: "Open Sans",sans-serif;
    color: rgba(255,255,255,0.8);
    border: rgba(255,255,255,0.5) 1px solid;
    border-radius: 4px;
    transition: all .5s ease;
    }
    .post {
    position: relative;
    width: 70%;
    max-width: 1366px;
    margin: 4rem auto;
    padding-bottom: .5rem;
    word-wrap: break-word;
    }
    .read-next p {
        font-weight: 200;
    }
    
</style>
                
                <a class="copyright text-muted">
                <p id="typing" class="footer-device1" cursor="default" pointer-events="none">这里有一个有趣的灵魂哦</p></a>
                
                
                
                
                <p class="copyright text-muted" style="color: lightslategray;letter-spacing: 1px;">

                    Copyright &copy; <a href="https://www.hackerjerry.top">{{ site.title }}</a> &nbsp;2018-{{ site.time | date: '%Y' }}
                    <br> <i class="fa fa-id-card-o"></i>&nbsp;陕ICP备<a href="http://beian.miit.gov.cn/">19023179</a>号
                </p>
                

                <hr style="visibility: hidden;">
                {% if page.previous.url or page.next.url %}
                 <aside class="read-next">
                       
                 {% if page.previous.url %}
                   
                    <a class="previous" href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}"   style="background-image: url('{% if page.previous.header-img %}{{page.previous.header-img}}{% else %}http://blog.img.hackerjerry.top/Fr3H5T0djIS8W5oODkX27bNvC35U{% endif %}');border-style: none;letter-spacing:2px">
                    <section class="post">
                        <div class="pr-title">{{page.previous.title}}</div>
                        <p>{{page.previous.subtitle}}</p> 
                    </section>
                        </a>
                    
                    {% endif %} 
                    {% endif %}
                    {% if page.next.url %}
                        
                        <a class="next" href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" style="background-image: url('{% if page.next.header-img %}{{page.next.header-img}}{% else %}http://blog.img.hackerjerry.top/Fr3H5T0djIS8W5oODkX27bNvC35U{% endif %}');border-style: none;letter-spacing:2px">
                        <section class="post">
                            <div class="ne-title">{{page.next.title}}</div>
                            <p> {{page.next.subtitle}}</p>
                        </section>
                         
                        </a>
                    
                    {% endif %}
                </aside>
                   
              
            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script src="{{ "/js/jquery.min.js " | prepend: site.baseurl }}"></script>

<!-- Bootstrap Core JavaScript -->
<!-- Currently, only navbar scroll-down effect at desktop still depends on this -->
<script src="{{ "/js/bootstrap.min.js " | prepend: site.baseurl }}"></script>

<!-- Custom Theme JavaScript -->
<script src="{{ "/js/jerry-blog.min.js " | prepend: site.baseurl }}"></script>

<!-- Service Worker -->
{% if site.service-worker %}
<script src="{{ "/js/snackbar.js " | prepend: site.baseurl }}"></script>
<script src="{{ "/js/sw-registration.js " | prepend: site.baseurl }}"></script>
{% endif %}

<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>

<!--
     Because of the native support for backtick-style fenced code blocks
     right within the Markdown is landed in Github Pages,
     From V1.6, There is no need for Highlight.js,
     so Jerryblog drops it officially.

     - https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0
     - https://help.github.com/articles/creating-and-highlighting-code-blocks/
     - https://github.com/jneen/rouge/wiki/list-of-supported-languages-and-lexers
-->
<!--
    <script>
        async("http://cdn.bootcss.com/highlight.js/8.6/highlight.min.js", function(){
            hljs.initHighlightingOnLoad();
        })
    </script>
    <link href="http://cdn.bootcss.com/highlight.js/8.6/styles/github.min.css" rel="stylesheet">
-->



{% if page.title == 'Archive' %}
<!-- jquery.tagcloud.js -->
<script>
    async('{{ "/js/jquery.tagcloud.js" | prepend: site.baseurl }}',function(){
        $.fn.tagcloud.defaults = {
            //size: {start: 1, end: 1, unit: 'em'},
            color: {start: '#bbbbee', end: '#2f93b4'},
        };
        $('#tag_cloud a').tagcloud();
    })
</script>
<script src='{{ "/js/archive.js " | prepend: site.baseurl }}'></script>
{% endif %}

<!--fastClick.js -->
<script>
    async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>


<!-- Google Analytics -->
{% if site.ga_track_id %}
<script>
    // dynamic User by Jerry
    var _gaId = '{{ site.ga_track_id }}';
    var _gaDomain = '{{ site.ga_domain }}';

    // Originial
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', _gaId, _gaDomain);
    ga('send', 'pageview');
</script>
{% endif %}


<!-- Baidu Tongji -->
{% if site.ba_track_id %}
<script>
    // dynamic User by Jerry
    var _baId = '{{ site.ba_track_id }}';

    // Originial
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?" + _baId;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
</script>
{% endif %}


<!-- Side Catalog -->
{% if page.catalog %}
<script type="text/javascript">
    function generateCatalog (selector) {

        // interop with multilangual 
        if ('{{ page.multilingual }}' == 'true') {
            _containerSelector = 'div.post-container.active'
        } else {
            _containerSelector = 'div.post-container'
        }

        // init
        var P = $(_containerSelector),a,n,t,l,i,c;
        a = P.find('h1,h2,h3,h4,h5,h6');

        // clean
        $(selector).html('')

        // appending
        a.each(function () {
            n = $(this).prop('tagName').toLowerCase();
            i = "#"+$(this).prop('id');
            t = $(this).text();
            c = $('<a href="'+i+'" rel="nofollow">'+t+'</a>');
            l = $('<li class="'+n+'_nav"></li>').append(c);
            $(selector).append(l);
        });
        return true;
    }

    generateCatalog(".catalog-body");

    // toggle side catalog
    $(".catalog-toggle").click((function(e){
        e.preventDefault();
        $('.side-catalog').toggleClass("fold")
    }))

    /*
     * Doc: https://github.com/davist11/jQuery-One-Page-Nav
     * Fork by Hux to support padding
     */
    async("{{ '/js/jquery.nav.js' | prepend: site.baseurl }}", function () {
        $('.catalog-body').onePageNav({
            currentClass: "active",
            changeHash: !1,
            easing: "swing",
            filter: "",
            scrollSpeed: 700,
            scrollOffset: 0,
            scrollThreshold: .2,
            begin: null,
            end: null,
            scrollChange: null,
            padding: 80
        });
    });
</script>
{% endif %}


<!-- Multi-Lingual -->
{% if page.multilingual %}
<!-- Handle Language Change -->
<script type="text/javascript">
    // get nodes
    var $zh = document.querySelector(".zh");
    var $en = document.querySelector(".en");
    var $select = document.querySelector("select");

    // Changes at v1.8.1: include lang flag as a url query. This interop well with catalog hash anchors.
    function getLang() { return new URLSearchParams(document.location.search).get("lang") }

    function setLang(newLang) {
        var params = new URLSearchParams(document.location.search)
        params.set("lang", newLang)
        document.location.search = params.toString()  // refresh.
    }

    // handle render
    function _render(){
        var lang = getLang()
        // en
        if(lang == "en"){
            $select.selectedIndex = 1;
            $en.style.display = "block";
            $en.classList.add("active");
            $zh.style.display = "none";
            $zh.classList.remove("active");
        // default to zh-cn
        }else{
            $select.selectedIndex = 0;
            $zh.style.display = "block";
            $zh.classList.add("active");
            $en.style.display = "none";
            $en.classList.remove("active");
        }
        // interop with catalog 
        if ("{{ page.catalog }}") generateCatalog(".catalog-body");
    }

    // handle select change
    function onLanChange(index){
        if(index == 0){
            lang = "zh"
        }else{
            lang = "en"
        }
        setLang(lang)
    }

    // init
    _render();
</script>
{% endif %}
<!-- 打字特效 -->
<script type="text/javascript">
    var scilper_option = new Object();
    scilper_option.site_name = "Jerry&#0;s Home";
    scilper_option.author_name = "Jerry";
    scilper_option.admin_des = "这里有一个有趣的灵魂哦";
var typing = function (r) {
    function t() {
        return b[Math.floor(Math.random() * b.length)]
    }

    function e() {
        return String.fromCharCode(94 * Math.random() + 33)
    }

    function n(r) {
        for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
            var l = document.createElement("span");
            l.textContent = e(), l.style.color = t(), n.appendChild(l)
        }
        return n
    }

    function i() {
        var t = o[c.skillI];
        c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : ( c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
    }

    var l = "",
        o = [ "欢迎来到" + scilper_option.site_name , scilper_option.admin_des ].map(function(r) {
            return r + "."
        }),
        a = 2,
        g = 1,
        s = 5,
        d = 75,
        b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)",
            "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
        ],
        c = {
            text: "",
            prefixP: -s,
            skillI: 0,
            skillP: 0,
            direction: "forward",
            delay: a,
            step: g
        };
    i()
};
typing(document.getElementById('typing'));

function ff() {
    var TimeShow = document.getElementById("TimeShow");
    if(TimeShow != undefined) {
        TimeShow.innerHTML = "Time to build the page：" + (new Date().getTime()-t1) + " ms";
    } else {
        return false;
    }
}
ff();
</script>
